<h2>calendar</h2>
<div class="ui-g">
    <div class="ui-g-12 ui-md-4">
        <h3>Basic</h3>
        <p-calendar [(ngModel)]="date1"></p-calendar> {{date1|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Spanish</h3>
        <p-calendar [(ngModel)]="date2" [locale]="es" dateFormat="dd/mm/yy"></p-calendar> {{date2|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Icon</h3>
        <p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar> <span style="margin-left:35px">{{date3|date}}</span>
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Min-Max</h3>
        <p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true"></p-calendar> {{date4|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Disable Days</h3>
        <p-calendar [(ngModel)]="date5" tabindex="0" [disabledDates]="invalidDates" [disabledDays]="[0,6]" readonlyInput="readonlyInput"></p-calendar> {{date5|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Navigators</h3>
        <p-calendar [(ngModel)]="date6" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar> {{date6|date}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Time</h3>
        <p-calendar [(ngModel)]="date7" [showTime]="true"></p-calendar> {{date7}}
    </div>
    <div class="ui-g-12 ui-md-4">
        <h3>Time Only </h3>
        <p-calendar [(ngModel)]="date8" [timeOnly]="true"></p-calendar>
    </div>
</div>
<h3>Inline {{date8|date}}</h3>
<p-calendar [(ngModel)]="date9" [inline]="true"></p-calendar>

<h2>slider</h2>
<h3 class="first">Basic: {{val71}}</h3>
<p-slider [(ngModel)]="val71" [style]="{'width':'200px'}"></p-slider>
<h3>Input: {{val72}}</h3>
<input type="text" pInputText [(ngModel)]="val72" style="width:190px"/>
<p-slider [(ngModel)]="val72" [style]="{'width':'200px'}"></p-slider>
<h3>Animate: {{val73}}</h3>
<p-slider [(ngModel)]="val73" [style]="{'width':'200px'}" [animate]="true"></p-slider>
<h3>Step: {{val74}}</h3>
<p-slider [(ngModel)]="val74" [style]="{'width':'200px'}" [step]="20"></p-slider>
<h3>Range: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h3>
<p-slider [(ngModel)]="rangeValues" [style]="{'width':'200px'}" [range]="true"></p-slider>
<h3>Vertical: {{val75}}</h3>
<p-slider [(ngModel)]="val75" [style]="{'height':'200px'}" orientation="vertical"></p-slider>

<h2>selectbutton</h2>
<h3 class="first">Single</h3>
<p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>
<p>Selected Type: {{selectedType}}</p>
<h3>Multiple</h3>
<p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
<p>Selected Types: <span *ngFor="let type of selectedTypes">{{type}} </span></p>
<hr />
<button type="button" (click)="clear()" pButton icon="fa-close" label="Clear"></button>

<h2>autocomplete</h2>
<h3 class="first">Basic</h3>
<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
    placeholder="Countries" [minLength]="1"></p-autoComplete>
<span style="margin-left:10px">Country: {{country ? country.name||country : 'none'}}</span>
<h3>Advanced</h3>
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
    [minLength]="1" placeholder="Hint: type 'v' or 'f'" [dropdown]="true" (onDropdownClick)="handleDropdownClick($event)">
    <ng-template let-brand pTemplate="item">
        <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
            <img src="app/resources/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
            <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
        </div>
    </ng-template>
</p-autoComplete>
<span style="margin-left:50px">Brand: {{brand||'none'}}</span>
<h3>Multiple</h3>
<p-autoComplete [(ngModel)]="countries" [suggestions]="filteredCountriesMultiple" (completeMethod)="filterCountryMultiple($event)" styleClass="wid100"
    [minLength]="1" placeholder="Countries" field="name" [multiple]="true">
</p-autoComplete>
<ul>
    <li *ngFor="let c of countries">{{c.name}}</li>
</ul>

<h2>listbox</h2>
<h3 class="first">Single</h3>
<p-listbox [options]="cities" [(ngModel)]="selectedCity"></p-listbox>
<p>Selected City: {{selectedCity}}</p>
<h3>Advanced (Multiple, Checkbox and Filter)</h3>
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter"></p-listbox>
<p>Selected Cities: <span *ngFor="let c of selectedCities" style="margin-right: 10px">{{c}}</span></p>
<h3>Content</h3>
<p-listbox [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'190px','max-height':'250px'}">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="app/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:5px 0 0 5px" width="48">
            <span style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</span>
        </div>
    </ng-template>
</p-listbox>
<p>Selected Car: {{selectedCar}}</p>
<button type="button" (click)="selectedCar=null" pButton icon="fa-close" label="Clear Selected Car"></button>

<h2>dropdown</h2>
<h3 class="first">Single</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="选择一个省份"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>
<h3>Editable</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" editable="editable" placeholder="Select a Brand"></p-dropdown>
<p>Selected Car: {{selectedCar||'none'}}</p>
<h3>Content with Filters</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="filter">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <img src="app/resources/demo/images/car/{{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:5px"/>
            <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
        </div>
    </ng-template>
</p-dropdown>
<p>Selected Car: {{selectedCar2||'none'}}</p>

<h2>multiselect</h2>
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect>
<p>Selected Cars: {{selectedCars}}</p>

<h2>checkbox</h2>
<h3 class="first">Basic</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities"></p-checkbox></div>
</div>
Selected Cities: <span *ngFor="let city of selectedCities" style="margin-right:10px">{{city}}</span>
<h3>Preselection</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-checkbox name="group2" value="Technology" label="Technology" [(ngModel)]="selectedCategories"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Finance" label="Finance" [(ngModel)]="selectedCategories"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Sports" label="Sports" [(ngModel)]="selectedCategories"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group2" value="Entertainment" label="Entertainment" [(ngModel)]="selectedCategories"></p-checkbox></div>
</div>
Selected Categories: <span *ngFor="let cat of selectedCategories" style="margin-right:10px">{{cat}} </span>
<h3>Boolean - {{checked}}</h3>
<p-checkbox [(ngModel)]="checked" binary="true"></p-checkbox>

<h2>chips</h2>
<h3 class="first">Basic</h3>
<p-chips [(ngModel)]="values1" ></p-chips>
<h3>ng-template</h3>
<p-chips [(ngModel)]="values2">
    <ng-template let-item pTemplate="item">
        {{item}} - (active) <i class="fa fa-user" style="margin-right:2em"></i>
    </ng-template>
</p-chips>

<h2>editor</h2>
<h3 class="first">Default</h3>
<p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor>
<p>Value: {{text1||'empty'}}</p>
<button pButton type="button" label="Clear" icon="fa-close" (click)="text1=null"></button>
<hr style="border-top:0px;border-color:#dde3e6">
<h3>Custom Toolbar</h3>
<p-editor [(ngModel)]="text2" [style]="{'height':'320px'}">
    <p-header>
        <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
        </span>
    </p-header>
</p-editor>
<p>Value: {{text2||'empty'}}</p>
<button pButton type="button" label="Clear" icon="fa-close" (click)="text2=null"></button>

<h2>Inputtext</h2>
<h3 class="first">Basic</h3>
<input id="in" type="text" size="30" pInputText [(ngModel)]="text">  {{text}}
<h3>Disabled</h3>
<input id="in" type="text" size="30" pInputText [disabled]="disabled" />
<button type="button" (click)="toggleDisabled()" pButton label="Toggle"></button>

<h2>inputtextarea</h2>
<h3 class="first">Default</h3>
<textarea rows="5" cols="30" pInputTextarea></textarea>
<h3>AutoResize</h3>
<textarea rows="5" cols="30" pInputTextarea autoResize="autoResize"></textarea>

<h2>mask</h2>
<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Basic</span>
        <p-inputMask mask="99-999999" [(ngModel)]="val1" placeholder="99-999999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>SSN</span>
        <p-inputMask mask="999-99-9999" [(ngModel)]="val2" placeholder="999-99-9999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Date</span>
        <p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Phone</span>
        <p-inputMask mask="(999) 999-9999" [(ngModel)]="val4" placeholder="(999) 999-9999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Phone Ext</span>
        <p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Serial Number</span>
        <p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
    </div>
</div>

<h2>spinner</h2>
<h3 class="first">Basic</h3>
<p-spinner size="30" [(ngModel)]="val41"></p-spinner>
<h3>Min/Max</h3>
<p-spinner size="30" [(ngModel)]="val42" [min]="0" [max]="100"></p-spinner>
<h3>Step</h3>
<p-spinner size="30" [(ngModel)]="val43" [step]="0.25"></p-spinner>
<h3>Disabled</h3>
<p-spinner size="30" [(ngModel)]="val44" [disabled]="true"></p-spinner>

<h2>togglebutton</h2>
<h3 class="first">Basic - ({{checked1}})</h3>
<p-toggleButton [(ngModel)]="checked1" [style]="{'width':'150px'}"></p-toggleButton>
<h3>Customized - ({{checked2}})</h3>
<p-toggleButton [(ngModel)]="checked2" onLabel="I confirm" offLabel="I reject" onIcon="fa-check-square" offIcon="fa-square" [style]="{'width':'150px'}"></p-toggleButton>

<h2>inputseitch</h2>
<h3 class="first"> Basic - {{checked3}}</h3>
<p-inputSwitch offLabel="No" [(ngModel)]="checked3"></p-inputSwitch>
<h3>Labels - <span> {{checked4}}</span></h3>
<p-inputSwitch onLabel="Yes"  [(ngModel)]="checked4"></p-inputSwitch>

<h2>radiobutton</h2>
<h3 class="first">Basic</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1"></p-radioButton></div>
</div>
Selected Value = {{val1||'none'}}
<h3>Preselection</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group2" value="Option 1" label="Option 1" [(ngModel)]="val2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group2" value="Option 2" label="Option 2" [(ngModel)]="val2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group2" value="Option 3" label="Option 3" [(ngModel)]="val2"></p-radioButton></div>
</div>
Selected Value = {{val2||'none'}}

<h2>password</h2>
<h3 class="first">Password</h3>
<input pPassword type="password"/>

<h2>tristatecheckbox</h2>
<h3 class="first">Value: {{value}}</h3>
<p-triStateCheckbox [(ngModel)]="value"></p-triStateCheckbox>

<h2>rating</h2>
<h3 class="first">Basic {{val61}}</h3>
<p-rating [(ngModel)]="val61"></p-rating>
<h3>Callback {{val62}}</h3>
<p-rating [(ngModel)]="val62" (onRate)="handleRate($event)" ></p-rating> <span *ngIf="msg" style="margin-left:10px">{{msg}}</span>
<h3>No Cancel {{val63}}</h3>
<p-rating [(ngModel)]="val63" [cancel]="false"></p-rating>
<h3>ReadOnly</h3>
<p-rating [ngModel]="5" readonly="true" stars="10" [cancel]="false"></p-rating>
<h3>Disabled</h3>
<p-rating [ngModel]="val64" disabled="true" stars="10"></p-rating>
